/**
 * 项目环境运行的配置文件
 * 
 * @author LiSong
 * @date 2022-5-12 09:43:16
 */

let path = require('path')
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const { getThemeColors, modifyVars } = require('./src/utils/theme-utils')
const { resolveCss } = require('./src/utils/theme-color-replacer-extend')

const productionGzipExtensions = ['js', 'css']

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: '/',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  // 生成的生产环境构建文件的目录
  outputDir: 'dist',
  // 关闭代码es-lint检查
  lintOnSave: false,
  // 以加速生产环境构建
  productionSourceMap: false,
  // 服务端配置
  devServer: {
    // 服务器可以被外部访问
    host: '0.0.0.0',
    // 请求端口号
    port: 8088,
    // 启动后不打开浏览器
    open: false,
    // 当出现编译错误或警告时，在浏览器中显示全屏覆盖
    overlay: {
      errors: true, warnings: false
    },
    // 在浏览器中以百分比显示编译进度
    progress: false,
  },
  // 传递任何第三方插件
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
    }
  },
  // 通过 webpack-merge 合并到最终的配置
  configureWebpack: config => {
    config.performance = {
      hints: false
    }
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: 'css/theme-colors-[contenthash:8].css',
        matchColors: getThemeColors(),
        injectCss: true,
        resolveCss
      })
    )
    // 本地环境
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  },
  // 接收一个基于 webpack-chain 的 ChainableConfig 实例
  chainWebpack: config => {
  },
  // css相关配置
  css: {
    // 向 CSS 相关的 loader 传递选项
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: modifyVars(),
          javascriptEnabled: true
        }
      }
    }
  }
}
